<template>
  <a-card :bordered="false" title="" class="mt-6">
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="false"
      bordered
    >
      <template slot="valueRender" slot-scope="text, record">
        <div>
          <a-input
            v-if="record.editable"
            style="margin: -5px 0"
            :value="text"
            @change="(e) => handleChange(e.target.value, record.id, 'value')"
          />
          <template v-else>
            {{ text }}
          </template>
        </div>
      </template>
      <template slot="operation" slot-scope="text, record">
        <div class="editable-row-operations">
          <span v-if="record.editable">
            <a @click="save(record.id)"><a-icon type="edit" /> 保存 </a>
            <a @click="cancel(record.id)"><a-icon type="edit" /> 取消 </a>
          </span>
          <span v-else>
            <a :disabled="editingKey !== ''" @click="edit(record.id)"
              ><a-icon type="edit" /> 编辑
            </a>
          </span>
        </div>
      </template>
    </a-table>
  </a-card>
</template>

<script>
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
  },
  {
    title: '配置项',
    dataIndex: 'text',
  },
  {
    title: '配置值',
    dataIndex: 'value',
    scopedSlots: { customRender: 'valueRender' },
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]

export default {
  data() {
    return {
      data: [],
      cacheData: [],
      columns,
      editingKey: '',
    }
  },
  created() {
    this.axios.get('system').then((res) => {
      this.data = res.data.data
      this.cacheData = this.data.map((item) => ({ ...item }))
    })
  },
  methods: {
    handleChange(value, id, column) {
      const newData = [...this.data]
      const target = newData.filter((item) => id === item.id)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    edit(id) {
      const newData = [...this.data]
      const target = newData.filter((item) => id === item.id)[0]
      this.editingKey = id
      if (target) {
        target.editable = true
        this.data = newData
      }
    },
    save(id) {
      const newData = [...this.data]
      const newCacheData = [...this.cacheData]
      const target = newData.filter((item) => id === item.id)[0]
      const targetCache = newCacheData.filter((item) => id === item.id)[0]
      if (target && targetCache) {
        delete target.editable
        this.data = newData
        Object.assign(targetCache, target)
        this.cacheData = newCacheData
        this.axios.put(`/system/${id}`, { value: target.value }).then((res) => {
          this.$message.success('保存成功')
        })
      }
      this.editingKey = ''
    },
    cancel(id) {
      const newData = [...this.data]
      const target = newData.filter((item) => id === item.id)[0]
      this.editingKey = ''
      if (target) {
        Object.assign(
          target,
          this.cacheData.filter((item) => id === item.id)[0],
        )
        delete target.editable
        this.data = newData
      }
    },
  },
}
</script>


